<template>
	<!-- 角色维护 -->
	<div>
		<v-card>
			<v-card-title>
				<v-tooltip bottom>
					<template v-slot:activator="{ on, attrs }">
						<v-btn class="ml-2" small tile color="primary" v-bind="attrs" v-on="on"
							@click="editRoleDialog=true,loadRoleGroupList()">
							创建角色
						</v-btn>
					</template>
					<span>创建新的角色</span>
				</v-tooltip>

				<v-divider class="mx-4" inset vertical></v-divider>

				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="角色名称" v-model="roleQuery.name" dense outlined>
						</v-text-field>
					</v-col>
					<!-- sm="6" md="2" -->
					<v-col cols="12" sm="3" md="2">
						<v-text-field label="角色代码" v-model="roleQuery.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="2">
						<v-btn depressed color="primary" @click="search">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshApps">
							刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-data-table :headers="roleHeaderList" :items="roleDataList" small fixed-header item-key="id" dense
				class="text-no-wrap" show-select loading-text="正在加载请稍等......" :loading="roleLoading"
				:options.sync="roleOptions" :footer-props="vuetifyDefaultPage" :server-items-length="roleTotalCount">
				<template v-slot:item.actions="{ item }">
					<div>
						<v-btn small tile color="primary" :disabled="item.code.toLocaleLowerCase()=='admin'"
							@click="editRoleDialog=true, roleModel=item,loadRoleGroupList()">
							编辑角色
						</v-btn>
						<v-btn class="ml-2" :disabled="item.code.toLocaleLowerCase()=='admin'" small tile color="primary" @click="setRoleActionClick(item)">
							分配角色权限
						</v-btn>
						<v-btn class="ml-2" :disabled="item.code.toLocaleLowerCase()=='admin'" small tile color="red" @click="deleteRoleGroupClick(item)">
							删除角色
						</v-btn>
					</div>
				</template>
			</v-data-table>
		</v-card>

		<v-dialog v-model="editRoleDialog" max-width="800px">
			<v-card>
				<v-card-title>{{roleModel.id===undefined?'添加角色':'编辑角色'}}</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12">
							<v-select v-model="roleModel.groupid" :items="roleGroupSelectList" label="角色分组(非必填)" dense
								outlined></v-select>
						</v-col>
						<v-col cols="12">
							<v-text-field label="角色代码" v-model="roleModel.code" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12">
							<v-text-field label="角色名称" v-model="roleModel.name" dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12">
							<v-textarea outlined name="input-7-4" label="备注" v-model="roleModel.description"
								:value="roleModel.description"></v-textarea>
						</v-col>
					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="success" text class="mr-4" @click="editRoleSubmit">确认</v-btn>
					<v-btn color="warning" text class="mr-4" @click="close">取消</v-btn>
				</v-card-actions>
				</v-card-actions>
			</v-card>
		</v-dialog>
		<setaction :setActionModel="setActionModel" ></setaction>
	</div>
</template>

<script>
	import setaction from './set_action.vue'
	export default {
		name: 'role_maintenance',
		components: {
			setaction
		},
		data: () => ({
			setActionModel: {
				setActionDialog: false,
				roleId: 0,
			},
			roleQuery: {
				name: '',
				code: '',
				groupname: ''
			},
			roleHeaderList: [{
					text: '操作',
					align: 'center',
					value: 'actions',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '角色名称',
					align: 'center',
					value: 'name',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '角色代码',
					align: 'center',
					value: 'code',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '角色组名称',
					align: 'center',
					value: 'groupname',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '账套代码',
					align: 'center',
					value: 'accountingbookcode',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '描述',
					align: 'center',
					value: 'description',
					filterable: false,
					class: 'fixed'
				},
			],
			roleDataList: [],
			roleTotalCount: 0,
			roleLoading: true,
			roleOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
				// 'items-per-page-all-text': '100'
			},
			editRoleDialog: false,
			roleModel: {},
			roleGroupSelectList: []
		}),
		watch: {
			roleOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},

		methods: {
			async loadRoleGroupList() {
				var response = await this.$httpRequest({
					url: `SPM/Role/LoadRoleGroupToSelectShow`,
					method: 'get',
				})
				
				if (response.status == 1) {
					this.roleGroupSelectList = response.data
				}
			},
			async search() {
				this.roleLoading = true
				var response = await this.$httpRequest({
					url: `SPM/Role/QueryRoleListByPage?
						name=${this.roleQuery.name}&
						code=${this.roleQuery.code}&
						groupname=${this.roleQuery.groupname}&
						pageNumber=${this.roleOptions.page}&
						pageSize=${this.roleOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.roleDataList = response.data.result
					this.roleTotalCount = response.data.pagination.totalRecords
					this.roleLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshApps() {
				this.roleQuery.name = ''
				this.roleQuery.code = ''
				this.roleQuery.groupname = ''
				await this.search()
			},
			close() {
				this.roleModel = {}
				this.editRoleDialog = false
			},
			//添加或编辑角色基本信息
			async editRoleSubmit() {
				var url = ''
				if (this.roleModel.groupid != undefined && this.roleModel.groupid > 0) {
					this.roleModel.groupname = this.roleGroupSelectList.filter(r => r.value == this.roleModel.groupid)[
						0].text
				}


				if (this.roleModel.id === undefined) {
					url = `SPM/Role/Add`
				} else {
					url = `SPM/Role/Update`
				}
				console.log(this.roleModel)
				console.log(this.roleModel.id)
				var response = await this.$httpRequest({
					url: url,
					method: 'post',
					data: this.roleModel
				})
				if (response.status == 1) {
					this.roleModel = {}
					this.$message.success(response.info)
					this.editRoleDialog = false
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			setRoleActionClick(item) {
				this.setActionModel.setActionDialog = true
				this.setActionModel.roleId = item.id
			},
			async deleteRoleGroupClick(item) {
				var response = await this.$httpRequest({
					url: `SPM/Role/Delete/${item.id}`,
					method: 'delete'
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					await this.search()
				} else {
					this.$message.error(response.info)
				}
			},
		}
	}
</script>

<style>
</style>
